<template>
  <div ref="modal" class="modal" v-show="value" @mousedown="drag($event)">
    <header>
      <slot name="title"></slot>
      <span @click="close">x</span>
    </header>
    <div class="con">
      <slot name="con"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: { value: Boolean },

  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("input", false);
    },
    drag(e) {
      let modal = this.$refs.modal;
      let x = e.offsetX;
      let y = e.offsetY;
      //拿到按下的位置到模态框边缘的距离
      console.log(x, y);
      document.onmousemove = function (e) {
        let pagex = e.clientX;
        let pagey = e.clientY;
        console.log(pagex, pagey);
        modal.style.left = pagex - x + "px";
        modal.style.top = pagey - y + "px";

        document.onmouseup = function () {
          document.onmousemove = null;
        };
      };
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.modal {
  width: 400px;
  height: 300px;
  position: fixed;
  left: calc(50% - 150px);
  top: calc(50% - 200px);
  //计算
  //   transform: translate(-50%, -50%);
  //   margin-top: -200px;
  //   margin-left: -150px;
  header {
    height: 50px;
    background: forestgreen;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
  }
  .con {
    height: 250px;
  }
}
</style>
